---
title: "Border Width"
description: "Utilities for controlling the width of an element's borders."
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/borderWidth'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { Heading } from '@/components/Heading'

export const classes = { plugin }

## All sides

Use the `border`, `.border-0`, `.border-2`, `.border-4`, or `.border-8` utilities to set the border width for all sides of an element.

```html indigo
<template preview>
  <div class="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-5">
      <div class="p-4 bg-indigo-300 text-white text-center font-extrabold flex items-center justify-center border-0 border-indigo-600">
        .border-0
      </div>
      <div class="p-4 bg-indigo-300 text-white text-center font-extrabold flex items-center justify-center border border-indigo-600">
        .border
      </div>
      <div class="p-4 bg-indigo-300 text-white text-center font-extrabold flex items-center justify-center border-2 border-indigo-600">
        .border-2
      </div>
      <div class="p-4 bg-indigo-300 text-white text-center font-extrabold flex items-center justify-center border-4 border-indigo-600">
        .border-4
      </div>
      <div class="p-4 bg-indigo-300 text-white text-center font-extrabold flex items-center justify-center border-8 border-indigo-600">
        .border-8
      </div>
  </div>
</template>

<div class="**border-0** border-indigo-600 ..."></div>
<div class="**border** border-indigo-600 ..."></div>
<div class="**border-2** border-indigo-600 ..."></div>
<div class="**border-4** border-indigo-600 ..."></div>
<div class="**border-8** border-indigo-600 ..."></div>
```

## Individual sides

Use the `border-{side}`, `.border-{side}-0`, `.border-{side}-2`, `.border-{side}-4`, or `.border-{side}-8` utilities to set the border width for one side of an element.

```html fuchsia
<template preview>
  <div class="grid grid-cols-2 gap-2 lg:grid-cols-4">
      <div class="p-4 bg-fuchsia-300 text-white text-center font-extrabold flex items-center justify-center border-t-2 border-fuchsia-600">
        .border-t-2
      </div>
      <div class="p-4 bg-fuchsia-300 text-white text-center font-extrabold flex items-center justify-center border-r-2 border-fuchsia-600">
        .border-r-2
      </div>
      <div class="p-4 bg-fuchsia-300 text-white text-center font-extrabold flex items-center justify-center border-b-2 border-fuchsia-600">
        .border-b-2
      </div>
      <div class="p-4 bg-fuchsia-300 text-white text-center font-extrabold flex items-center justify-center border-l-2 border-fuchsia-600">
        .border-l-2
      </div>
  </div>
</template>

<div class="**border-t-2** border-fuchsia-600 ..."></div>
<div class="**border-r-2** border-fuchsia-600 ..."></div>
<div class="**border-b-2** border-fuchsia-600 ..."></div>
<div class="**border-l-2** border-fuchsia-600 ..."></div>
```

## Between elements

You can also add borders between child elements using the `divide-{x/y}-{width}` and `divide-{color}` utilities.

Learn more in the [Divide Width](/docs/divide-width) and [Divide Color](/docs/divide-color) documentation.

```html lightBlue
<template preview>
  <div class="divide-y divide-light-blue-400">
    <div class="p-4 text-light-blue-800 text-center font-extrabold">1</div>
    <div class="p-4 text-light-blue-800 text-center font-extrabold">2</div>
    <div class="p-4 text-light-blue-800 text-center font-extrabold">3</div>
  </div>
</template>

<div class="**divide-y** divide-light-blue-400 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div></div>
</div>
```

## Responsive

To control the border width of an element at a specific breakpoint, add a `{screen}:` prefix to any existing border width utility. For example, use `md:border-t-4` to apply the `border-t-4` utility at only medium screen sizes and above.

```html
<div class="border-2 **md:border-t-4** ..."></div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

### Border Widths

By default, Tailwind provides five `border-width` utilities, and the same number of utilities per side (top, right, bottom, and left). You change, add, or remove these by editing the `theme.borderWidth` section of your Tailwind config. The values in this section will also control which utilities will be generated side.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      borderWidth: {
        DEFAULT: '1px',
        '0': '0',
        '2': '2px',
+       '3': '3px',
        '4': '4px',
+       '6': '6px',
-       '8': '8px',
      }
    }
  }
```

### Variants

<Variants plugin="borderWidth" />

### Disabling

<Disabling plugin="borderWidth" />
